<template>
  <div class="refundAdd">
    <div class="btns">
      <div>新增退款申请</div>
      <div>
        <el-button icon="CircleClose" size="large" @click="doClose(false)">关闭</el-button>
        <el-button type="success" icon="Check" size="large" @click="doSave">保存</el-button>
      </div>
    </div>
    <div class="content">
      <el-card shadow="never">
        <template #header>
          <el-icon color="#ffffff"><Tickets /></el-icon>
          <span class="title">订单信息</span>
        </template>
        <template #default>
          <div class="info">
            <div>
              <span>订单编号：</span>
              <el-input v-model="orderInfo.orderCode" placeholder="请输入订单编号" clearable class="input-w" @keyup.enter="loadOrderInfo"></el-input>
            </div>
            <div v-show="orderInfo.orderStatus">
              <span>订单状态：</span>
              <el-tag v-if="orderInfo.orderStatus === 0" type="info">待付款</el-tag>
              <el-tag v-if="orderInfo.orderStatus === 1" type="warning">待发货</el-tag>
              <el-tag v-if="orderInfo.orderStatus === 2">已发货</el-tag>
              <el-tag v-if="orderInfo.orderStatus === 3" type="success">已完成</el-tag>
              <el-tag v-if="orderInfo.orderStatus=== 4" type="danger">已关闭</el-tag>
            </div>
            <div v-show="orderInfo.sourceType">
              <span>订单来源：</span>
              <span v-if="orderInfo.sourceType === 0">APP</span>
              <span v-if="orderInfo.sourceType === 1">小程序</span>
              <span v-if="orderInfo.sourceType === 2">后台</span>
            </div>
            <div v-show="orderInfo.orderType">
              <span>订单类型：</span>
              <span>{{ orderInfo.orderType ? '加盟订单' : '正常订单' }}</span>
            </div>
            <div v-show="orderInfo.payType">
              <span>支付方式：</span>
              <span v-if="orderInfo.payType === 0">未支付</span>
              <span v-if="orderInfo.payType === 1">支付宝</span>
              <span v-if="orderInfo.payType === 2">微信</span>
            </div>
            <div v-show="orderInfo.payStatus">
              <span>付款状态：</span>
              <span>{{ orderInfo.payStatus ? '已付款' : '未付款' }}</span>
            </div>
            <div v-show="orderInfo.createdTime">
              <span>下单时间：</span>
              <span>{{ $date(orderInfo.createdTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
            </div>
            <div v-if="orderInfo.note" style="color: #F95505;">
              <el-icon><WarningFilled /></el-icon>
              <span>订单备注：</span>
              <span>{{ orderInfo.note }}</span>
            </div>
            <div v-if="orderInfo.buyerNote" style="color: #F95505;">
              <el-icon><WarningFilled /></el-icon>
              <span>买家备注：</span>
              <span>{{ orderInfo.buyerNote }}</span>
            </div>
          </div>
        </template>
      </el-card>
      <el-card shadow="never">
        <template #header>
          <el-icon color="#ffffff"><Goods /></el-icon>
          <span class="title">商品信息</span>
        </template>
        <template #default>
          <el-table :data="goodsList" border>
            <el-table-column label="商品图片" prop="value1" align="center">
              <template #default="{row}">
                <div class="img-cell">
                  <el-image :src="row.pic + '?x-oss-process=image/resize,m_fill,h_40,w_40'" />
                </div>
              </template>
            </el-table-column>
            <el-table-column label="商品名称" prop="name" header-align="center"></el-table-column>
            <el-table-column label="销售单价" prop="salePrice" align="center"></el-table-column>
            <el-table-column label="促销优惠金额" prop="promotionAmount" align="center"></el-table-column>
            <el-table-column label="点数抵扣金额" prop="pointAmount" align="center"></el-table-column>
            <el-table-column label="优惠券抵扣金额" prop="couponAmount" align="center"></el-table-column>
            <el-table-column label="后台调整折扣金额" prop="discountAmount" align="center"></el-table-column>
            <el-table-column label="购买数量" prop="quantity" align="center"></el-table-column>
            <el-table-column label="小计" prop="value9" align="center">
              <template #default="{row}">
                <span>{{ getTotalPrice(row) }}</span>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-card>
      <el-card shadow="never">
        <template #header>
          <el-icon color="#ffffff"><SoldOut /></el-icon>
          <span class="title">退货信息</span>
        </template>
        <template #default>
          <div class="info other">
            <div><span>类型：</span><el-tag>退款</el-tag></div>
            <div>
              <span>退款状态：</span>
              <el-select v-model="form.returnStatus" placeholder="请选择退款状态" class="input-w">
                <el-option label="待审核" value="0"/>
                <el-option label="退款通过" value="1"/>
                <el-option label="退款驳回" value="2"/>
                <el-option label="退款完成" value="8"/>
              </el-select>
            </div>
            <div>
              <span>退款金额：</span>
              <el-input v-model="form.refundAmount" type="number" placeholder="请输入退款金额" clearable class="input-w"></el-input>
            </div>
            <div>
              <span>退款原因：</span>
              <el-select v-model="form.reason" placeholder="请选择退款原因" class="input-w">
                <el-option v-for="item in takeGoodsReason" :key="item.id" :label="item.reasonName" :value="item.id"/>
              </el-select>
            </div>
            <div class="illustrate">
              <span>退款说明：</span>
              <el-input v-model="form.description" type="textarea" :rows="2" placeholder="请输入退款说明" clearable class="input-t"></el-input>
            </div>
            <div class="vouchers">
              <span>退款凭证：</span>
              <upload-img v-model="form.returnPics" multiple></upload-img>
            </div>
          </div>
        </template>
      </el-card>
    </div>
  </div>
</template>

<script setup name="refundAdd">
  import { saveRefundApi, getOrderInfoApi, getOrderInGoodsInfoApi, getReturnGoodsReasonList } from '@/api/api'
  import { ref, getCurrentInstance } from 'vue'

  // 获取注册的全局实列
  const currentThis = getCurrentInstance().appContext.config.globalProperties
  const emits = defineEmits(['close'])

  let orderInfo = ref({
    orderCode: '',
    orderStatus: '',
    sourceType: '',
    orderType: '',
    payType: '',
    payStatus: '',
    createdTime: '',
    note: ''
  })
  let form = ref({
    orderId: '',
    returnType: 1,
    returnStatus: '',
    refundAmount: '',
    reason: '',
    description: '',
    returnPics: ''
  })
  let goodsList = ref([])
  let takeGoodsReason = ref([])

  // 查询商品订单信息和商品信息
  function loadOrderInfo() {
    if(!orderInfo.value.orderCode) {
      return
    }
    getOrderInfoApi(orderInfo.value.orderCode).then(res => {
      if(res.code === '200') {
        orderInfo.value = res.data
        form.value.orderId = res.data.orderId
        form.value.refundAmount = res.data.payAmount
      } else {
        currentThis.$message.error(res.message)
      }
    })
    getOrderInGoodsInfoApi(orderInfo.value.orderCode).then(res => {
      if(res.code === '200') {
        goodsList.value = res.data
      } else {
        currentThis.$message.error(res.message)
      }
    })
  }

  // 获取退货原因下拉数据
  function loadTakeGoodsReason() {
    getReturnGoodsReasonList().then(res => {
      if(res.code === '200') {
        takeGoodsReason.value = res.data
      } else {
        currentThis.$message.error(res.message)
      }
    })
  }
  loadTakeGoodsReason()

  // 获取商品小计
  function getTotalPrice(e) {
    return parseInt(e.quantity) * e.salePrice - e.promotionAmount - e.pointAmount - e.couponAmount - e.discountAmount
  }

  function doSave() {
    if(!form.value.orderId) {
      currentThis.$message.error('请输入订单编号查询订单信息')
      return
    }
    if(!form.value.returnStatus) {
      currentThis.$message.error('请选择退款状态')
      return
    }
    if(!form.value.refundAmount) {
      currentThis.$message.error('请输入退款金额')
      return
    }
    if(!form.value.reason) {
      currentThis.$message.error('请选择退款原因')
      return
    }
    if(!form.value.description) {
      currentThis.$message.error('请输入退款说明')
      return
    }
    if(!form.value.returnPics) {
      currentThis.$message.error('请上传退款凭证')
      return
    }
    currentThis.$messageBox.confirm('确认新增吗？').then(() => {
      const loading = currentThis.$loading('正在新增，请耐心等待')
      saveRefundApi(form.value).then(res => {
        loading.close()
        if(res.code === '200') {
          doClose(true)
          currentThis.$message.success(res.message)
        } else {
          currentThis.$message.error(res.message)
        }
      })
    }).catch(() => {})
  }

  function doClose(e) {
    emits('close', e)
  }
</script>

<style lang="less" scoped>
.refundAdd{
  padding: 0 80px;
  .btns{
    height: 8vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    >div{
      width: 50%;
      &:first-child{
        font-size: 25px;
        font-weight: bold;
      }
      &:last-child{
        display: flex;
        justify-content: flex-end;
      }
    }
  }
  .content{
    height: 92vh;
    overflow: hidden auto;
    :deep(.el-card){
      margin-bottom: 15px;
      .el-card__header{
        display: flex;
        align-items: center;
        background: #3BB9F1;
        .el-icon{
          margin-right: 5px;
        }
        .title{
          color: #ffffff;
        }
      }
      .el-card__body{
        .el-table{
          margin-top: 10px;
          .img-cell{
            display: flex;
            justify-content: center;
            align-items: center;
            .el-image{
              width: 40px; 
              height: 40px;
              border-radius: 5px;
            }
          }
        }
        .other{
          >div{
            >span:first-child{
              width: 100px;
              text-align: right;
            }
          }
        }
        .info{
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          line-height: 50px;
          .input-w{
            width: 200px;
          }
          .input-z{
            width: 360px;
          }
          .input-t{
            width: 690px;
          }
          >div{
            width: 33.3%;
            color: #333333;
            font-size: 14px;
            display: flex;
            align-items: center;
          }
          .illustrate{
            width: 66.6%;
          }
          .vouchers{
            width: 100%;
          }
        }
      }
    }
  }
}
</style>